<script setup>
import { RouterView } from 'vue-router'
import meua from './components/meua.vue';
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
const fireState = ref(false)
const loading = ref(false)
onMounted(() => {
    fireStateChecked()
})

function fireStateChecked() {
    window.go.main.Todos.GetFireState().then(res => {
        console.log(res)
        if (res == 'open') {
            fireState.value = true
        } else {
            fireState.value = false
        }
    })
}

async function fireChange() {
    loading.value = true
    return new Promise((resolve, reject) => {
        if (fireState.value == false) {
            try {
                console.log("fireopen")
                window.go.main.Todos.OpenFireWall().then((res) => {
                    console.log(res)
                    if (res == 'fail') {
                        ElMessage.error("防火墙已开启")
                        reject()
                    }
                    loading.value = false
                    resolve(true)
                })
            } catch (error) {
                console.log(error)
                ElMessage.error(error)
            }
        } else {
            try {
                console.log("fireclose")
                window.go.main.Todos.CloseFireWall().then((res) => {
                    console.log(res)
                    if (res == 'fail') {
                        ElMessage.error("防火墙已关闭")
                        reject()
                    }
                    loading.value = false
                    resolve(true)
                })
            } catch (error) {
                console.log(error)
                ElMessage.error(error)
            }
        }
    })
}
</script>

<template>
    <div class="common-layout">
        <div class="header">
            <div class="icon">
                <img src="" alt="">
            </div>
            <div class="setting"><img src="" alt=""></div>
        </div>
        <div class="main">
            <div class="containerBox">
                <div class="aside">
                    <div class="box">
                        <meua />
                        <div class="open">防火墙状态:<el-switch v-model="fireState" size="mini" :before-change="fireChange"
                                :loading="loading" class="firewall" />
                        </div>
                    </div>
                </div>
                <div class="mainbox">
                    <router-view v-slot="{ Component }">
                        <transition name="contain_animation" mode="out-in">
                            <component :is="Component" />
                        </transition>
                    </router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
@aside-width: 200px;
@header-heigth: 48px;
@header-margin: 11px;

@keyframes components_animation {
    0% {
        position: relative;
        top: 100%;
    }

    100% {
        position: relative;
        top: 0%;
    }
}

.header {
    height: @header-heigth;
    background-color: white;
    width: 100vw;
    position: fixed;
    top: 0;
}

@keyframes components_leave {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}
html{
    background-color: rgb(245, 245, 245);
}
.common-layout {
    width: 100vw;
    min-height:calc(100vh - @header-heigth - @header-margin);
    background-color: rgb(245, 245, 245);
}

.main {
    margin-top: calc(@header-heigth + @header-margin);

    .containerBox {
        min-height: calc(100vh - @header-heigth - @header-margin);
        display: flex;
    }

    .aside {
        width: @aside-width;
        background-color: white;
        margin-right: 11px;
        border-radius: 0 10px 10px 0;
        height: 100%;
    }
    .mainbox{
        width: calc(100vw - @aside-width - 41px);
        border-radius: 10px;
        min-height: calc(100% - 70px);
        padding: 20px 10px 20px 10px;
        background-color: white;
    }
}

.box {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

.open {
    height: 30px;
    line-height: 30px;
    padding: 10px;
    font-size: 12px;
    width: calc(100% - 20px);

    .firewall {
        margin-left: 10px;
    }
}

.contain_animation-enter-active {
    animation: components_animation 0.5s;
}

.contain_animation-leave-active {
    animation: components_leave 0.5s;
}
</style>